<template>
    <div>
        <el-card>
            <div>
                <el-row>
                    <el-form :model="query" ref="queryForm" label-width="100px">

                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                            <el-form-item label="所在路径">
                                <el-input v-model="form.parent" placeholder="请输入所在路径" clearable size="small" style="width: 100%" />
                            </el-form-item>

                        </el-col>

                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                            <el-form-item label="搜索文件">
                                <el-input v-model="query.name" placeholder="请输入文件或者文件夹名称" clearable size="small" style="width: 100%;margin-right: 0.52%;" @keyup.enter.native="handleQuery" />
                                <el-select v-model="query.sort" clearable placeholder="排序方式" style="margin-right: 0.52%;">
                                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>

                            </el-form-item>
                        </el-col>

                    </el-form>
                </el-row>
            </div>
            <div>
                <el-button plain size="mini" type="primary" @click="back">
                    <svg-icon class="but-icon" icon-class="file-back" />返回
                </el-button>
                <el-button plain size="mini" type="primary" @click="home">
                    <svg-icon class="but-icon" icon-class="file-home" />首页
                </el-button>

                <el-button plain size="mini" type="primary" @click="refresh">
                    <svg-icon class="but-icon" icon-class="file-refresh" />刷新
                </el-button>

                <el-button plain size="mini" type="primary" @click="batchDelete" :disabled="operaFolder.length == 0">
                    <svg-icon class="but-icon" icon-class="file-delete" />删除
                </el-button>

                <el-button plain size="mini" type="primary" @click="uploadFiles">
                    <svg-icon class="but-icon" icon-class="file-upload" />上传
                </el-button>

                <el-button plain size="mini" type="primary" @click="add">
                    <svg-icon class="but-icon" icon-class="file-add" />新建
                </el-button>

                <el-button plain size="mini" type="primary" @click="handleMoveBatch" :disabled="operaFolder.length == 0">
                    <svg-icon class="but-icon" icon-class="file-delete" />剪切
                </el-button>

                <el-button plain size="mini" type="primary" @click="handleCopyBatch" :disabled="operaFolder.length == 0">
                    <svg-icon class="but-icon" icon-class="file-delete" />复制
                </el-button>

                <el-button :disabled="move.filePath == null && batchObj.length == 0" plain size="mini" type="primary" @click="batchPaste">
                    <svg-icon class="but-icon" icon-class="file-paste" />粘贴
                </el-button>

                <el-button :disabled="operaFolder.length == 0" plain size="mini" type="primary" @click="batchDownload">
                    <svg-icon class="but-icon" icon-class="file-download" />下载
                </el-button>

                <!-- <button type="button" class="operation">
          <svg-icon icon-class="file-back" />
        </button>

        <button type="button" class="operation">
          <svg-icon icon-class="file-home" />
        </button>-->
            </div>
        </el-card>

        <el-card>
            <template>
                <el-table :data="list" style="width: 100%" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="50" align="center" />
                    <el-table-column label="文件" width="400">
                        <template slot-scope="scope">
                            <span class="first">
                                <a @click="handleView(scope.row)" style="color: #000; cursor: pointer">

                                    <span class="first-icon" v-if="
                                            scope.row.type.toLowerCase() == 'png' ||
                                            scope.row.type.toLowerCase() == 'jpg' ||
                                            scope.row.type.toLowerCase() == 'png' ||
                                            scope.row.type.toLowerCase() == 'jpeg' ||
                                            scope.row.type.toLowerCase() == 'gif' ||
                                            scope.row.type.toLowerCase() == 'JPG' ||
                                            scope.row.type.toLowerCase() == 'webp'
                                        ">
                                        <el-image style="height: 25px; width: 25px" :src="scope.row.url" :preview-src-list="[scope.row.url]"></el-image>
                                    </span>
                                    <span class="first-icon" v-else>
                                        <svg-icon slot="prefix" :icon-class="scope.row.icon" style="height: 25px; width: 25px" />
                                    </span>
                                    {{ scope.row.filename }}
                                </a>
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="type" label="类型"></el-table-column>
                    <el-table-column prop="lastModifiedTime" label="修改时间" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="size" label="大小"></el-table-column>
                    <el-table-column prop="size" label="操作">
                        <template slot-scope="scope">
                            <el-dropdown @command="(command) => handleCommand(command, scope.row)" trigger="click">
                                <span class="el-dropdown-link">
                                    <svg-icon icon-class="operation" style="height: 25px; width: 25px" />
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item icon="el-icon-circle-check" command="handleShare">分享</el-dropdown-item>
                                    <el-dropdown-item icon="el-icon-plus" command="handleDownload">下载</el-dropdown-item>
                                    <el-dropdown-item icon="el-icon-circle-plus" command="handleCopy">复制</el-dropdown-item>
                                    <el-dropdown-item icon="el-icon-circle-plus-outline" command="handleMove">移动</el-dropdown-item>
                                    <el-dropdown-item icon="el-icon-check" command="handleRename">重命名</el-dropdown-item>
                                    <el-dropdown-item icon="el-icon-circle-check" command="handleDelete">删除</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                            <el-link class="copyUrl" :disabled="scope.row.isDirectory" type="primary" v-clipboard:copy="scope.row.url" v-clipboard:success="firstCopySuccess"
                                v-clipboard:error="firstCopyError">复制链接</el-link>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </el-card>
        <!-- 添加或修改参数配置对话框 -->
        <el-dialog :title="title" :visible.sync="open" :width="dialogWidth" append-to-body @close="closeDialog">
            <el-image v-if="title == '查看图片'" style="
          width: auto;
          height: auto;
          display: flex;
          justify-content: center;
          align-items: center;
        " :src="form.pic" :preview-src-list="[form.pic]"></el-image>
            <el-row>
                <el-form :model="form" label-width="100px" v-if="title == '新增文件夹'">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <el-form-item label="上级路径">
                            <el-input v-if="form.folderIsNull" v-model="form.absolutePath" placeholder="请输入上级路径" clearable style="width: 240px" />
                            <el-input v-if="!form.folderIsNull" v-model="form.parent" placeholder="请输入上级路径" clearable style="width: 240px" />
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                        <el-form-item label="新建文件夹">
                            <el-input v-model="form.newFolder" placeholder="请输入文件夹" clearable style="width: 240px" />
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-row>
            <div slot="footer" class="dialog-footer" v-if="title != '查看图片'">
                <el-button type="primary" @click="submitFileForm">确 定</el-button>
                <el-button @click="open = false">取 消</el-button>
            </div>
        </el-dialog>

        <el-dialog :title="title" :visible.sync="openRename" :width="dialogWidth" append-to-body @close="closeDialog">
            <el-row>
                <el-form label-width="100px">
                    <el-col :xs="24" :sm="12" :md="24" :lg="24" :xl="24">
                        <div>
                            <h3 style="text-align: center">重命名文件:{{ currentFolder.filename }}</h3>
                        </div>
                        <el-form-item label="新名称">
                            <el-input v-model="newName" placeholder="请输入新名称" clearable />
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-row>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitRename">确 定</el-button>
                <el-button @click="openRename = false">取 消</el-button>
            </div>
        </el-dialog>
        <!-- 上传文件 -->

        <el-dialog :title="title" :visible.sync="openFiles" :width="dialogWidth" append-to-body @close="closeDialog">
            <el-row>
                <el-col :xs="24" :sm="12" :md="24" :lg="24" :xl="24">
                    <el-upload class="upload-demo" ref="upload" action="#" list-type="text" :on-success="onSuccess" multiple :on-preview="handlePreview" :on-remove="handleRemove" :limit="20"
                        :on-exceed="handleExceed" :file-list="fileList" :auto-upload="false" :before-remove="beforeRemove" :http-request="httpRequest">
                        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                        <el-button style="margin-left: 10px" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                        <el-button style="margin-left: 10px" size="small" type="danger" @click="clearFiles">清空文件列表</el-button>
                        <div slot="tip" class="el-upload__tip">上传文件到当前目录，多选文件，最多一次性上传20个文件(请勿上传大文件，暂时不支持大文件分片上传)</div>
                        <el-progress style="width: 100%; margin-top: 8px" :text-inside="true" :stroke-width="20" :percentage="progressPercent" />
                    </el-upload>
                </el-col>
            </el-row>
        </el-dialog>

        <el-dialog :title="title" :visible.sync="openVideo" :width="dialogWidth" append-to-body @close="closeDialog">
            <div class="videoShow">
                <video :src="videoUrl" style="width: 100%; height: 100%" id="videoBox" controls="controls" ref="videoPlay">您的浏览器不支持视频播放</video>
            </div>
        </el-dialog>

        <!--预览文本内容 -->
        <el-dialog :title="title" :visible.sync="openText" :width="dialogWidth" append-to-body @close="closeDialog">
            <el-input type="textarea" :rows="30" placeholder v-model="txtPre"></el-input>
        </el-dialog>
    </div>
</template>
<script>
import {
    listFtp,
    listServer,
    getBackFolder,
    downloadServerFile,
    deleteFiles,
    addFolder,
    renameFile,
    uploadFiles,
    copyFile,
} from "@/api/system/file";
import { getToken } from "@/utils/auth";
import FileSaver from "file-saver";
export default {
    data() {
        return {
            //排序
            options: [
                {
                    value: "sizeAsc",
                    label: "大小正序",
                },
                {
                    value: "sizeDesc",
                    label: "大小倒序",
                },
                {
                    value: "dateAsc",
                    label: "修改时间正序",
                },
                {
                    value: "dateDesc",
                    label: "修改时间倒序",
                },
            ],
            query: {
                sort: "",
                name: "",
            },
            picList: [],
            loading: true, //表格加载
            list: [], //文件列表
            folder: undefined, //切换文件夹路径
            history: undefined, // 切换文件夹历史记录
            icon: undefined, //文件动态图标
            open: false, //弹框
            openRename: false,
            openFiles: false,
            // 自适应弹框宽度
            dialogWidth: 0,
            title: "", //弹框标题
            openText: false, //文本预览弹框
            txtPre: "", //文本预览内容
            form: {}, //弹框对象
            newName: null, //重命名字段
            operaFolder: [], //多选操作文件对象
            currentFolder: {}, //当前文件对象
            //移动操作对象
            batchSelect: [], //批量选择数组
            batchObj: [], //多选移动复制剪切对象
            move: {
                filePath: null,
                newName: null,
                parentPath: null,
                operation: null,
            },

            /*******文件上传参数设置********** */
            // 设置上传的请求头部
            headers: { Authorization: "Bearer " + getToken() },
            // 上传的地址
            url: process.env.VUE_APP_BASE_API + "/file/server/upload",
            progressPercent: 0, // 进度条默认为0
            fileList: [], // // 上传文件列表
            show: false, //上传进度条控制显示

            /*************播放视频*************** */
            videoUrl: undefined, //视频地址
            openVideo: false, //视频播放弹窗
        };
    },
    created() {
        this.setDialogWidth();
        this.getListFile();
        this.fileFormData = new FormData();
    },
    mounted() {
        window.onresize = () => {
            return (() => {
                this.setDialogWidth();
            })();
        };
    },
    methods: {
        // 自适应弹框宽度
        setDialogWidth() {
            console.log(document.body.clientWidth);
            var val = document.body.clientWidth;
            const def = 800; // 默认宽度
            if (val < def) {
                this.dialogWidth = "100%";
            } else {
                this.dialogWidth = def + "px";
            }
        },
        // 获取文件列表
        getListFile() {
            this.reset();
            listServer(this.folder, this.query.name, this.query.sort).then(
                (res) => {
                    this.loading = true;
                    this.form = res.data[0];
                    this.currentFolder = res.data[0];
                    if (res.data.length != 0 && res.data[0].filename != null) {
                        this.list = res.data;
                        this.setIcon(this.list);
                    } else {
                        this.list = [];
                    }
                    this.loading = false;
                }
            );
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.getListFile();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 重置form表单数据
        reset() {
            this.form = {};
            this.currentFolder = {};
        },
        // 打开目录或者文件
        handleView(row) {
            this.loading = true;
            if (row.isDirectory) {
                this.query.name = null;
                this.query.sort = null;
                this.folder = row.absolutePath;
                this.getListFile();
            }
            //  else if (
            //   row.type.toLowerCase() == "jpg" ||
            //   row.type.toLowerCase() == "png" ||
            //   row.type.toLowerCase() == "jpeg" ||
            //   row.type.toLowerCase() == "gif" ||
            //   row.type.toLowerCase() == "JPG" ||
            //   row.type.toLowerCase() == "webp"
            // ) {
            //   this.title = "查看图片";
            //   this.loading = false;
            //   this.open = true;
            //   this.form.pic = row.url;
            // }
            else if (
                row.type.toLowerCase() == "mp4" ||
                row.type.toLowerCase() == "avi" ||
                row.type.toLowerCase() == "mp4" ||
                row.type.toLowerCase() == "mov" ||
                row.type.toLowerCase() == "rmvb" ||
                row.type.toLowerCase() == "rm"
            ) {
                this.title = "视频播放：" + row.filename;
                this.openVideo = true;
                this.videoUrl = row.url;
                this.loading = false;
            } else if (row.type.toLowerCase() == "pdf") {
                window.open(row.url, "_blank");
                this.loading = false;
            } else if (
                row.type.toLowerCase() == "txt" ||
                row.type.toLowerCase() == "log" ||
                row.type.toLowerCase() == "xml" ||
                row.type.toLowerCase() == "sh" ||
                row.type.toLowerCase() == "html" ||
                row.type.toLowerCase() == "js" ||
                row.type.toLowerCase() == "java" ||
                row.type.toLowerCase() == "c" ||
                row.type.toLowerCase() == "sql" ||
                row.type.toLowerCase() == "json"
            ) {
                this.title = "预览内容";
                this.urlToBlob(row.url);
                // window.open(row.url, "_blank");
                this.openText = true;
                this.loading = false;
            } else {
                this.loading = false;
            }
        },
        //打开文件流
        urlToBlob(url) {
            let file_url = decodeURIComponent(url);
            //可以是具体.txt也可以是接口返回的blob，或者web转换
            let xhr = new XMLHttpRequest();
            xhr.open("get", file_url, true);
            xhr.responseType = "blob";
            let self = this; //onload this指向为window中转一下
            this.loading = true;
            xhr.onload = function () {
                if (this.status == 200) {
                    self.loading = false;
                    // console.log(this.response);
                    const reader = new FileReader();
                    reader.onload = function () {
                        self.txtPre = reader.result; //获取的数据data
                        self.dialogvisibleview = true;
                        // console.log("reader.result", reader.result);
                    };
                    reader.readAsText(this.response);
                } else {
                    slef.loading = false;
                }
            };
            xhr.send();
        },
        // 返回上一级
        back() {
            this.query.name = null;
            this.query.sort = null;
            this.loading = true;
            //当前文件夹
            this.folder = this.currentFolder.back;
            this.getListFile();
        },
        // 返回首页
        home() {
            (this.folder = undefined), this.getListFile();
        },
        // 刷新
        refresh() {
            this.getListFile();
        },
        //上传文件
        uploadFiles() {
            this.title = "文件上传";
            this.openFiles = true;
        },

        // 多选框选中数据
        handleSelectionChange(selection) {
            this.batchSelect = selection;
            this.operaFolder = selection.map((item) => item.absolutePath);
        },
        //下载文件
        download(row) {
            const { url } = row;
            if (row.isDirectory) {
                this.$message.warning("文件夹不支持下载");
            } else if (
                row.type.toLowerCase() == "png" ||
                row.type.toLowerCase() == "jpg" ||
                row.type.toLowerCase() == "png" ||
                row.type.toLowerCase() == "jpeg" ||
                row.type.toLowerCase() == "gif" ||
                row.type.toLowerCase() == "JPG" ||
                row.type.toLowerCase() == "webp" ||
                row.type.toLowerCase() == "txt"
            ) {
                this.msgSuccess("文件开始下载");
                downloadServerFile(url).then((response) => {
                    // vue中给url传参 中文参数 添加编码解码
                    // 解码用
                    // decodeURIComponent(str);
                    // 编码用
                    // encodeURIComponent(str);
                    // let fileName = response.headers.requestfilename;
                    // fileName = decodeURIComponent(fileName);
                    // var blob = new Blob([response.data]);
                    // var requestUrl = window.URL.createObjectURL(blob);
                    // var a = document.createElement("a");
                    // a.href = requestUrl;
                    // a.download = fileName; // 文件名称需要自己定义。如果需要知道也可以在header中自定义一个文件名称返回 也可以随机生成一个 我这里是已经提前知道了文件名
                    // a.click();

                    const blob = new Blob([response.data]);
                    const fileName = decodeURIComponent(
                        response.headers.requestfilename
                    );
                    // const link = document.createElement('a')
                    // link.download = fileName
                    // link.style.display = 'none'
                    // link.href = URL.createObjectURL(blob)
                    // document.body.appendChild(link)
                    // link.click()
                    // URL.revokeObjectURL(link.href)
                    // document.body.removeChild(link)
                    FileSaver.saveAs(blob, fileName);
                });
            } else {
                // const a = document.createElement("a"); // 创建a标签
                // a.setAttribute("download", row.filename); // download属性
                // a.setAttribute("href", url); // href链接
                // a.click(); // 自执行点击事件
                // window.location.href = url;
                try {
                    var elemIF = document.createElement("iframe");
                    elemIF.src = url;
                    elemIF.style.display = "none";
                    document.body.appendChild(elemIF);
                } catch (e) {
                    alert("下载异常！");
                }
            }
        },
        // 删除文件
        batchDelete(row) {
            let filePaths = row.absolutePath || this.operaFolder;
            filePaths = filePaths instanceof Array ? filePaths : [filePaths];
            this.$confirm(
                '是否确认删除文件项目"' + filePaths + '"的数据项?',
                "警告",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }
            )
                .then(function () {
                    return deleteFiles(filePaths);
                })
                .then(() => {
                    this.getListFile();
                    this.msgSuccess("删除成功");
                })
                .catch(() => {});
        },
        //新建文件夹
        add() {
            this.title = "新增文件夹";
            this.open = true;
        },
        //打开重命名窗口
        rename(row) {
            this.reset();
            this.title = "重命名";
            this.openRename = true;
            this.currentFolder = row;
            this.newName = this.currentFolder.filename;
        },
        //重命名文件或文件夹
        submitRename() {
            renameFile(
                this.currentFolder.absolutePath,
                this.newName,
                this.currentFolder.parent
            ).then((res) => {
                this.msgSuccess(res.message);
                this.getListFile();
                this.openRename = false;
            });
        },
        //移动文件赋值
        handleMove(row) {
            this.move.filePath = row.absolutePath;
            this.move.newName = row.filename;
            this.move.operation = "move";
            this.$message({
                message: "已选择文件" + row.filename + ",请到指定目录进行粘贴",
                type: "success",
            });
        },
        //批量移动文件赋值
        handleMoveBatch() {
            this.batchObj = this.batchSelect;
            this.move.operation = "move";
            this.$message({
                message: "已批量选择文件,请到指定目录进行粘贴",
                type: "success",
            });
        },
        //复制文件赋值
        handleCopy(row) {
            this.move.filePath = row.absolutePath;
            this.move.newName = row.filename;
            this.move.operation = "copy";
            this.$message({
                message: "已选择文件" + row.filename + ",请到指定目录进行粘贴",
                type: "success",
            });
        },
        //批量复制文件赋值
        handleCopyBatch() {
            this.batchObj = this.batchSelect;
            this.move.operation = "copy";
            this.$message({
                message: "已批量选择文件,请到指定目录进行粘贴",
                type: "success",
            });
        },

        //批量复制文件下载
        batchDownload() {
            this.batchObj = this.batchSelect;
            for (let i = 0; i < this.batchObj.length; i++) {
                this.download(this.batchObj[i]);
            }
        },
        //移动或者复制文件文件或文件夹请求
        paste() {
            this.move.parentPath = this.form.parent;
            //如果复制文件
            if (this.move.operation == "copy") {
                copyFile(
                    this.move.filePath,
                    this.move.newName,
                    this.move.parentPath
                ).then((res) => {
                    this.msgSuccess(res.message);
                    this.getListFile();
                    this.move = {};
                });
                //否则移动文件
            } else if (this.move.operation == "move") {
                renameFile(
                    this.move.filePath,
                    this.move.newName,
                    this.move.parentPath
                ).then((res) => {
                    this.msgSuccess(res.message);
                    this.getListFile();
                    this.move = {};
                });
            }
        },
        //批量移动
        batchMove() {
            if (this.batchObj.length != 0) {
                for (let i = 0; i < this.batchObj.length; i++) {
                    this.move.operation = "move";
                    this.move.filePath = this.batchObj[i].absolutePath;
                    this.move.newName = this.batchObj[i].filename;
                    this.paste();
                }
            } else {
                this.msgSuccess("未选择文件");
            }
        },
        //批量复制
        batchCopy() {
            if (this.batchObj.length != 0) {
                for (let i = 0; i < this.batchObj.length; i++) {
                    this.move.operation = "copy";
                    this.move.filePath = this.batchObj[i].absolutePath;
                    this.move.newName = this.batchObj[i].filename;
                    this.paste();
                }
            } else {
                this.msgSuccess("未选择文件");
            }
        },
        //粘贴按钮
        batchPaste() {
            console.log(this.move.operation);
            if (this.batchObj.length != 0 && this.move.operation == "move") {
                this.batchMove();
                this.batchSelect = [];
                this.batchObj = [];
            } else if (
                this.batchObj.length != 0 &&
                this.move.operation == "copy"
            ) {
                this.batchCopy();
                this.batchSelect = [];
                this.batchObj = [];
            } else {
                this.paste();
            }
        },
        // 更多操作触发
        handleCommand(command, row) {
            switch (command) {
                case "handleDownload":
                    this.download(row);
                    break;
                case "handleDelete":
                    this.batchDelete(row);
                    break;
                case "handleMove":
                    this.handleMove(row);
                    break;
                case "handleCopy":
                    this.handleCopy(row);
                    break;
                case "handleRename":
                    this.rename(row);
                    break;
                case "handleShare":
                    alert("暂不支持");
                    break;
                default:
                    break;
            }
        },
        // 复制成功时的回调函数
        firstCopySuccess(e) {
            console.log("copy arguments e:", e);
            this.$message.success("链接复制成功");
        },
        firstCopyError(e) {
            console.log("copy arguments e:", e);
            this.$message.error("链接复制失败");
        },
        // 确定按钮
        submitFileForm() {
            let newFolder = this.form.parent + "/" + this.form.newFolder;
            addFolder(newFolder).then((res) => {
                this.msgSuccess(res.message);
                this.open = false;
                this.getListFile();
            });
        },
        // 设置图标
        setIcon(list) {
            list.forEach(function (item) {
                if (item.isFile) {
                    if (
                        item.type.toLowerCase() == "xlsx" ||
                        item.type.toLowerCase() == "xls"
                    ) {
                        item.icon = "file-xls";
                    } else if (
                        item.type.toLowerCase() == "doc" ||
                        item.type.toLowerCase() == "docx"
                    ) {
                        item.icon = "file-doc";
                    } else if (item.type.toLowerCase() == "pdf") {
                        item.icon = "file-pdf";
                    } else if (
                        item.type.toLowerCase() == "ppt" ||
                        item.type.toLowerCase() == "pptx"
                    ) {
                        item.icon = "file-ppt";
                    } else if (item.type.toLowerCase() == "sql") {
                        item.icon = "file-sql";
                    } else if (
                        item.type.toLowerCase() == "sh" ||
                        item.type.toLowerCase() == "bat" ||
                        item.type.toLowerCase() == "out" ||
                        item.type.toLowerCase() == "json"
                    ) {
                        item.icon = "file-sh";
                    } else if (
                        item.type.toLowerCase() == "md" ||
                        item.type.toLowerCase() == "txt" ||
                        item.type.toLowerCase() == "conf"
                    ) {
                        item.icon = "file-book";
                    } else if (
                        item.type.toLowerCase() == "html" ||
                        item.type.toLowerCase() == "css"
                    ) {
                        item.icon = "file-html";
                    } else if (
                        item.type.toLowerCase() == "js" ||
                        item.type.toLowerCase() == "vue"
                    ) {
                        item.icon = "file-js";
                    } else if (
                        item.type.toLowerCase() == "rpm" ||
                        item.type.toLowerCase() == "deb"
                    ) {
                        item.icon = "file-linux";
                    } else if (
                        item.type.toLowerCase() == "exe" ||
                        item.type.toLowerCase() == "msi"
                    ) {
                        item.icon = "file-win";
                    } else if (item.type.toLowerCase() == "log") {
                        item.icon = "file-log";
                    } else if (
                        item.type.toLowerCase() == "jar" ||
                        item.type.toLowerCase() == "java"
                    ) {
                        item.icon = "file-java";
                    } else if (
                        item.type.toLowerCase() == "zip" ||
                        item.type.toLowerCase() == "rar" ||
                        item.type.toLowerCase() == "7z" ||
                        item.type.toLowerCase() == "tar" ||
                        item.type.toLowerCase() == "gz" ||
                        item.type.toLowerCase() == "iso"
                    ) {
                        item.icon = "file-zip-1";
                    } else if (
                        item.type.toLowerCase() == "mp3" ||
                        item.type.toLowerCase() == "wav" ||
                        item.type.toLowerCase() == "aac" ||
                        item.type.toLowerCase() == "ogg" ||
                        item.type.toLowerCase() == "ape" ||
                        item.type.toLowerCase() == "wv"
                    ) {
                        item.icon = "file-audio";
                    } else if (
                        item.type.toLowerCase() == "mp4" ||
                        item.type.toLowerCase() == "avi" ||
                        item.type.toLowerCase() == "mp4" ||
                        item.type.toLowerCase() == "mov" ||
                        item.type.toLowerCase() == "rmvb" ||
                        item.type.toLowerCase() == "rm"
                    ) {
                        item.icon = "file-video";
                    } else if (item.type.toLowerCase() == "jpg") {
                        item.icon = "file-jpg";
                        // this.picList.push(item.url);
                    } else if (item.type.toLowerCase() == "png") {
                        item.icon = "file-png";
                        // this.picList.push(item.url);
                    } else if (
                        item.type.toLowerCase() == "jpeg" ||
                        item.type.toLowerCase() == "gif" ||
                        item.type.toLowerCase() == "webp"
                    ) {
                        item.icon = "file-photo";
                        // this.picList.push(item.url);
                    } else {
                        item.icon = "file";
                    }
                } else if (item.isDirectory) {
                    if (item.isHidden) {
                        item.icon = "folder-hidden";
                    } else {
                        item.icon = "folder";
                    }
                }
            });
        },
        //判断是否为图片
        isPic(type) {
            if (
                row.type == "jpg" ||
                row.type == "png" ||
                row.type == "jpeg" ||
                row.type == "gif" ||
                row.type == "JPG" ||
                row.type == "webp"
            ) {
                return true;
            } else {
                return false;
            }
        },

        /****文件上传方法区域 */
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        handleExceed(files, fileList) {
            this.$message.warning(
                `当前限制选择 20 个文件，本次选择了 ${
                    files.length
                } 个文件，共选择了 ${files.length + fileList.length} 个文件`
            );
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        onSuccess(response, file, fileList) {
            //   this.$refs.upload.clearFiles();  //去掉文件列表
        },
        //去掉文件列表
        clearFiles() {
            this.$refs.upload.clearFiles();
            this.progressPercent = 0;
        },
        httpRequest(params) {
            this.show = true;
            let uploadForm = new FormData();
            uploadForm.append("file", params.file);
            uploadForm.append("mode", "server");
            uploadForm.append("folder", this.form.parent);
            // 进度条
            const uploadProgressEvent = (progressEvent) => {
                this.progressPercent = Math.floor(
                    (progressEvent.loaded * 100) / progressEvent.total
                );
            };
            uploadFiles(uploadForm, uploadProgressEvent).then((res) => {
                this.msgSuccess("上传成功");
                params.onSuccess(); //上传成功(打钩的小图标)
                // this.$refs.upload.clearFiles(); //去掉文件列表
                this.show = false;
                this.getListFile();
            });
        },
        submitUpload() {
            this.$refs.upload.submit();
        },
        /*****************************视频播放 */
        videoImg: function () {
            this.$refs["videoPlay"].play();
            //或者
            //var video=document.getElementById("videoBox");
            //video.play();
            //暂停
            //video.pause();
        },

        closeDialog() {
            this.videoUrl = ""; //清空数据 关闭视频播放
            this.getListFile(); //重新刷新列表
        },
    },
};
</script>
<style rel="stylesheet/scss" lang="scss">
.first-icon {
    padding-right: 15px;
}
.operation {
    margin-right: 8px;
    width: 60px; /* 宽度 */
    height: 30px; /* 高度 */
    border-width: 0px; /* 边框宽度 */
    border-radius: 3px; /* 边框半径 */
    background: #1e90ff; /* 背景颜色 */
    cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
    outline: none; /* 不显示轮廓线 */
    font-family: Microsoft YaHei; /* 设置字体 */
    color: white; /* 字体颜色 */
    font-size: 17px; /* 字体大小 */
}
.operation:hover {
    background: #5599ff;
}
.but-icon {
    margin-right: 15%;
}

/* 文件上传样式设置 */
// 文件上传组件

// 视频样式
//视频
.videoShow {
    width: 100%;
    height: 600px;
    padding: 10px 0 50px;
    position: relative;
}
#videoBox {
    object-fit: fill;
    border-radius: 8px;
    display: inline-block;
    vertical-align: baseline;
}
.video-img {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    z-index: 999;
    background-size: 100%;
    cursor: pointer;
    img {
        display: block;
        width: 60px;
        height: 60px;
        position: relative;
        top: 260px;
        left: 48%;
    }
}
//解决视频有黑色的线框
video:focus {
    outline: -webkit-focus-ring-color auto 0px;
}

//复制链接按钮
.copyUrl {
    margin-left: 10%;
    margin-top: -4%;
}
</style>